<template>
  <div class="app-container">
    <el-card>
      <!-- 搜索 -->
      <el-form
        :inline="true"
        :model="interviewSkillsList"
        ref="interviewSkillsList"
        class="demo-form-inline"
      >
        <div class="left">
          <el-form-item label="关键字" style="margin: 0 35px">
            <el-input
              v-model="interviewSkillsList.keyword"
              placeholder="根据文章标题搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="interviewSkillsList.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="empty">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </div>
        <div class="right"></div>
        <el-form-item>
          <el-button type="success" @click="addArticle()">
            <i class="el-icon-edit"></i> 新增技巧
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 数据记录 -->
      <el-alert type="info" class="alert" :closable="false"
        ><i class="el-alert__icon el-icon-info"></i> 数据一共{{
          total
        }}条</el-alert
      >
      <!-- 数据列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="100" type="index">
        </el-table-column>
        <el-table-column label="文章标题" width="500">

          <template slot-scope="scoped">
            <div>
              {{ scoped.row.title }}
              <i
                @click="(isShowVideo = true), (videoSrc = scoped.row.videoURL)"
                v-if="scoped.row.videoURL"
                class="el-icon-video-camera"
                style="font-size: 20px; color: blue; cursor: pointer;"
              ></i>
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scoped">
            {{ editTime(scoped.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="125">
          <template slot-scope="scoped">
            {{ scoped.row.state ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="210">
          <template slot-scope="scoped">
            <el-button
              @click.native.prevent="previewHandle(scoped.row)"
              type="text"
              size="small"
            >
              预览
            </el-button>

            <el-button type="text" size="small" @click="openState(scoped.row)">
              {{ scoped.row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="!scoped.row.state"
              @click="hanldeEditForm(scoped.row)"
            >
              修改
            </el-button>

            <el-button
              @click="deleteRow(scoped.row.id)"
              type="text"
              size="small"
              :disabled="!scoped.row.state"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="paginationClass"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(interviewSkillsList.page)"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="Number(interviewSkillsList.pagesize)"
        :total="Number(total)"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>

    <!-- 新增弹层 -->
    <el-dialog
      :title="isEdit ? '修改文章' : '新增文章'"
      :visible.sync="dialogFormVisible"
    >
      <articlesAdd
        v-if="dialogFormVisible"
        @success="success"
        :isEdit="isEdit"
        :row="row"
      ></articlesAdd>
    </el-dialog>

    <!-- 预览弹层 -->
    <el-dialog title="预览文章" :visible.sync="dialogTableVisible">
      <articlesPreview v-if="dialogTableVisible" :row="row"></articlesPreview>
    </el-dialog>

    <!-- 视频弹层 -->
    <showVideo
      v-if="isShowVideo"
      :videoSrc="videoSrc"
      @closeShowVideo="isShowVideo = false"
    ></showVideo>
  </div>
</template>

<script>
import articlesAdd from '@/module-hmmm/components/articles-add.vue'
import articlesPreview from '@/module-hmmm/components/articles-preview.vue'
import { list, remove, changeState } from '@/api/hmmm/articles'
import { parseTime } from '@/utils/index'
import showVideo from '@/module-hmmm/components/showVideo.vue'
export default {
  name: 'articles',
  components: { articlesAdd, articlesPreview, showVideo },
  data () {
    return {
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      tableData: [],
      dialogFormVisible: false,
      dialogTableVisible: false,
      interviewSkillsList: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: ''
      },
      total: 0,
      row: {},
      isEdit: false,
      isShowVideo: false,
      videoSrc: null
    }
  },
  created () {
    delete this.interviewSkillsList.keyword
    delete this.interviewSkillsList.state
    this.listHandle(this.interviewSkillsList)
    parseTime()
  },
  methods: {
    // 初始数据
    initbleData () {
      // 读取数据
      this.listHandle()
    },
    // 数据列表
    async listHandle () {
      const { data: res } = await list(this.interviewSkillsList)
      // 获取数据给dataList
      this.tableData = res.items
      // 获取总条数
      this.total = res.counts
      // console.log(res, 888)
    },
    // 预览弹层
    previewHandle (row) {
      this.dialogTableVisible = true
      // console.log(row, 888)
      this.row = row
    },
    // 清空
    empty () {
      this.interviewSkillsList.keyword = null
      this.interviewSkillsList.state = null
      this.listHandle()
    },
    // 搜索
    onSubmit () {
      this.listHandle(this.interviewSkillsList)
      // console.log(this.interviewSkillsList, 666)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.interviewSkillsList.pagesize = val
      if (this.interviewSkillsList.page === 1) {
        this.listHandle(this.interviewSkillsList)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.interviewSkillsList.page = val
      this.listHandle()
    },
    // 删除
    deleteRow (user) {
      this.$confirm('确认删除?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then((response) => {
              this.$message.success('成功删除了用户' + '!')
              this.tableData.splice(user, 1)
              this.listHandle(this.interviewSkillsList)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 新增
    addArticle () {
      this.dialogFormVisible = true
      this.isEdit = false
    },
    // 修改
    hanldeEditForm (row) {
      // console.log(row, 888666)
      this.dialogFormVisible = true
      this.isEdit = true
      this.row = row
    },
    // 格式化时间
    editTime (time) {
      return parseTime(time, '')
    },
    success () {
      // console.log('000')
      this.dialogFormVisible = false
      this.listHandle()
    },
    // 状态
    async openState (row) {
      console.log(row, 3333333)
      row.state === 1 ? (row.state = 0) : (row.state = 1)
      const res = await changeState(row)
      console.log(res)
    }
  }
}
</script>

<style scoped lang="scss">
.demo-form-inline {
  display: flex;
  justify-content: space-between;
}
.paginationClass {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
.alert {
  margin-bottom: 17px;
  height: 35px;
  line-height: 35px;
}
</style>
